<template>
  <view class="all-artworks-list">
    <view class="artworks-list-item-container">
      <view
        v-for="(itemData, index) in artworksListData"
        :key="index"
        class="list-item-container">
        <view
          v-for="(item, inde_) in itemData"
          :key="inde_"
          :class="`artworks-item artworks-item${item.type}`"
          @click="handleArtworks(item, inde_)">
          <image
            v-if="item.type == 9"
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.wx_cover_url || item.cover_url"
            :mode="item.type === 7 ? 'widthFix' : 'aspectFill'"
            :class="`image-cover image-cover${item.type}`">
          </image>
          <image
            v-else-if="item.type === 11"
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.video_cover_url || `${item.cover_url}`"
            mode="aspectFill"
            :class="`image-cover image-cover${item.type}`">
          </image>
          <image
            v-else-if="item.type !== 4 && item.type !== 8"
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.wx_cover_url || item.cover_url + '?imageMogr2/auto-orient/thumbnail/!30p/blur/1x0/quality/80'"
            :mode="item.type === 7 ? 'widthFix' : 'aspectFill'"
            :class="`image-cover image-cover${item.type}`">
          </image>
          <image
            v-else
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.video_cover_url || `${item.cover_url}?vframe/jpg/offset/1`"
            :mode="item.type === 7 ? 'widthFix' : 'aspectFill'"
            :class="`image-cover image-cover${item.type}`">
          </image>
          <!-- 状态显示 -->
          <view class="show-status-container">
            <view v-if="item.audit_status === 'review'" class="wait">
              <text>审核中</text>
              <u-icon name="clock" size="28"></u-icon>
            </view>
            <view v-else-if="item.audit_status === 'reject'" class="reject">
              <text>违规</text>
            </view>
            <view v-else-if="item.audit_status === 'success'">
              <u-icon name="download" size="28"></u-icon>
              <text style="padding-left: 6rpx">{{ item.download_num }}</text>
            </view>
          </view>
          <!-- 播放按钮 -->
          <image
            v-if="item.type === 4 || item.type === 8"
            src="@/static/image/play.png"
            mode="scaleToFill"
            class="play-icon"
          />
          <!-- 状态显示 -->
          <image
            v-if="isBatch && !item.checked"
            src="@/static/icon/unchecked.png"
            mode="scaleToFill"
            class="checkbox"
          />
          <image
            v-else-if="isBatch && item.checked"
            src="@/static/icon/checked.png"
            mode="scaleToFill"
            class="checkbox"
          />
          <!-- 置顶 -->
          <view v-if="item.is_top === '1' && !isAlbum" class="is_top">
            <text>置顶</text>
          </view>
          <!-- 置顶 -->
          <view v-if="item.album_top === '1' && isAlbum" class="is_top">
            <text>置顶</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import WallpaperItem from '@/components/artworksItem/wallpaper.vue';
  import Square from '@/components/artworksItem/square.vue';
  import VideoWallpaper from '@/components/artworksItem/videoWallpaper.vue';
  import BgItem from '@/components/artworksItem/bgArtworksItem.vue';
  import TextTemplate from '@/components/artworksItem/texttemPlate.vue';
export default {
  components: {
    WallpaperItem,
    Square,
    VideoWallpaper,
    BgItem,
    TextTemplate
  },
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '列表',
      artworksListData: []
    }
  },
  watch: {
    artworksList: {
      immediate: true,
      handler(val) {
        if (val && val.length > 0) {
          let waterfallLeftListData = [];
          let waterfallCenterListData = [];
          let waterfallRightListData = [];
          val.forEach((item, index) => {
            if (index % 3 === 0) {
              waterfallLeftListData.push(item);
            } else if (index % 3 === 1) {
              waterfallCenterListData.push(item);
            } else if (index % 3 === 2) {
              waterfallRightListData.push(item);
            }
          });
          this.artworksListData = [];
          this.artworksListData.push(waterfallLeftListData);
          this.artworksListData.push(waterfallCenterListData);
          this.artworksListData.push(waterfallRightListData);
        } else {
          this.artworksListData = [];
        }
      }
    }
  },
  methods: {
    handleArtworks(rowDta, index) {
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta);
        return;
      }
      
      const currentClick = this.artworksList.findIndex(item => item.id === rowDta.id);

      this.$emit('handleCheckBox', currentClick);
    },
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{
    display: flex;
    justify-content: space-between;

    .list-item-container{
      min-width: 31%;
      max-width: 31%;
    }

    .artworks-item{
      width: 214rpx;
      margin-bottom: 24rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      border: 1rpx solid #eaeaea;

      .image-cover{
        width: 100%;
        max-height: 364rpx;
        float: left;
      }

      .image-cover2,
      .image-cover3{
        height: 212rpx;
      }

      .image-cover8,
      .image-cover6{
        height: 150rpx;
      }

      .play-icon{
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .5);
      }

      .show-status-container{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 100%;
        // height: 44rpx;
        line-height: 44rpx;
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        padding-left: 10rpx;
        padding-right: 10rpx;
        font-size: 24rpx;

        .wait{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #f29100;
        }

        .reject{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #fa3534;
          font-size: 20rpx;
        }
      }

      .checkbox{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        top: 0;
        color: #fff;
        border-radius: 6rpx;
        background-color: $uni-color-primary2;
      }
    }
  }
</style>